import { Button } from "../../components";
import Icon from "../../assets/link_1.svg";

import Modal from "./modal";
import { useSlate } from "slate-react";
import { useState } from "react";

export default () => {
  const editor: any = useSlate();
  const [open, setOpen] = useState<boolean>();
  const onClick = () => {
    if (editor.isLinkActive()) {
      return;
    }
    setOpen(true);
  };

 const onClose=()=>{
  setOpen(false);
  
 }

 const onConfirm=(values)=>{
  if(values?.url){
    editor.insertLink(values?.url,values?.text)
  }
  setOpen(false)
 }
  return (<><Modal onConfirm={onConfirm} open={open} onClose={onClose} />   
      <Button
        onClick={onClick}
        isPreventDefault={false}
        active={editor.isLinkActive()}
        icon={Icon}
      /></>)
};
